<template>
  <div
    v-if="!initializing"
    class="vc-component"
    :style="visual.parseStyle(currNode.currStyle)"
  >
    <el-form-item v-bind="options">
      <template #label>
        <span>{{label}}</span>
        <span v-if="description" style="margin-left: 5px;">
          <el-tooltip :content="description">
            <cc-icon iconId="018dca8ec9890493be26" />
          </el-tooltip>
        </span>
      </template>
      <vc-page-comp
        v-for="(child, index) in props.node.children"
        :key="index"
        :node="child"
      />
    </el-form-item>
  </div>
</template>

<script setup>
import { ref, onBeforeMount, nextTick } from 'vue';
import visual from "@/visual/js/visual";
import tool from "@/utils/tool";

const props = defineProps({
  node: Object,
  compStyle: Object
});
const options = ref({});
const label = ref();
const description = ref();
const initializing = ref(true);
const currNode = ref(props.node);

const init = (styleId) => {
  initializing.value = true;
  visual.initStyle(currNode.value, styleId);
  const compStyle = currNode.value.currCompStyle || {};
  label.value = compStyle['label'] || '';
  description.value = compStyle['description'] || '';

  let required = false;
  let propName = '';
  let rules = [];
  tool.walkTree(props.node, node => {
    if (node.id && node.formItem === '1' && node.styleList && node.styleList[0].compStyle['required']) {
      required = true;
      propName = node.name;
      rules = [{required: true, message: `此项为必填项`, trigger: ['blur', 'change']}];
    }
  });

  let data = {};
  data['prop'] = propName;
  data['rules'] = rules;
  data['required'] = required;
  visual.addIfNotNull(data, compStyle, 'labelWidth');
  options.value = data;
  nextTick(() => initializing.value = false);
};

onBeforeMount(() => init());
</script>